
//自定义button样式
$blue:#5272e9;
$light-blue:#0099DF;
$grey:#B4B8B7;
$green:#00B589;
$yellow:#FF9600;
$red:#C03639;
$pink: #E65D6E;
$tiffany: #4AB7BD;
$white:#ffffff;

$panGreen: #30B08F;

@mixin colorBtn($color) {
background: $color;
border-color:$color;
color:#fff;
&:hover {
    border-color:$color;
    background-color:$color;
    color: #fff;
    &:before, &:after {
      background: $color;
    }
}
}

.grey-btn {
    @include colorBtn($grey)
}

.blue-btn {
@include colorBtn($blue)
}

.light-blue-btn{
@include colorBtn($light-blue)
}


.green-btn {
@include colorBtn($green)
}

.yellow-btn {
@include colorBtn($yellow)
}


.red-btn {
@include colorBtn($red)
}

.pink-btn {
@include colorBtn($pink)
}

.tiffany-btn {
@include colorBtn($tiffany)
}

.white-btn{
    @include colorBtn($white);
    color: #333;
}
.pan-btn {
font-size: 14px;
color: #fff;
padding: 14px 36px;
border-radius: 8px;
border: none;
outline: none;
margin-right: 25px;
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
    background: #fff;
    &:before, &:after {
      width: 100%;
      transition: 600ms ease all;
    }
}
&:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: 400ms ease all;
}
&::after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
}
}

.custom-button{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    color: #fff;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
}

//按钮size
$mini-width:57px;

$mini2-width:100px;

$min-width:66px;

$small-width:115px;

$secondary-width:150px;

$max-width:160px;

@mixin sizeBtn($size) {
    width:$size;
}

.mini-btn{
    // height: 27px;
    // line-height: 27px;
    padding: 0;
    border-radius: 4px;
    font-size: 10px;
    @include sizeBtn($mini-width)
}

.mini2-btn{
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-radius: 4px;
    font-size: 14px;
    @include sizeBtn($mini2-width)
}
.min-btn{
    // height: 27px;
    // line-height: 27px;
    padding: 0;
    border-radius: 4px;
    font-size: 10px;
    @include sizeBtn($min-width)
}

.small-btn {
    height:33px;
    line-height: 33px;
    padding: 0;
    border-radius:5px;
    @include sizeBtn($small-width)
}

.secondary-btn {
    height:40px;
    border-radius:6px;
    @include sizeBtn($secondary-width)
}

.max-btn {
    height:39px;
    border-radius:6px;
    @include sizeBtn($max-width)
}


// 2.3自定义按钮样式

.el-button--primary {
    background-color: #5272e9;
}

.el-button--primary:hover {
    background: #31A8FD;
}

